<template>
  <VDialog
    @close="handleClose"
    title="分配人员"
    width="60%"
    @save="save"
    :loading="loading"
  >
    <template #content>
      <div
        class="m-[10px] mx-[20px] border border-[var(--base-border-color)] rounded-[10px]"
      >
        <div
          v-if="data?.roleName"
          class="bg-[var(--base-table-header-bg-color)] text-[#3487FF] text-[14px] text-center leading-[40px] rounded-tl-[10px] rounded-tr-[10px] tracking-[1px] border-b border-b-[var(--base-border-color)]"
        >
          {{ data.roleName }}
        </div>
        <div class="m-[10px]">
          <el-cascader
            v-model="searchValue"
            :options="personnelList"
            :props="cascaderProps"
            filterable
            class="w-full"
            placeholder="请搜索"
            @remove-tag="handleRemove"
            :filter-method="customFilterMethod"
          />
        </div>
        <el-cascader-panel
          v-model="personnel"
          :options="personnelList"
          :props="cascaderProps"
          filterable
          ref="cascaderPanel"
          class="cascaderPanel"
        />
      </div>
    </template>
  </VDialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { organizationList } from "@/api/system/role";
import { cascaderProps, treeToArray } from "./data";
// import { debounce, filterTreeByKeyword } from "@/utils/tools.js";
const props = defineProps({
  data: { type: Object, default: () => {} },
  api: { type: Object, required: true },
});
const { data } = toRefs(props);
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const loading = ref(false);
const handleClose = async (refresh) => {
  personnel.value = [];
  searchValue.value = []
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
const personnelList = ref([]);
const personnelListAll = ref([]);
const getPersonnel = async () => {
  const { data } = await organizationList();
  personnelList.value = data || [];
  personnelListAll.value = data || [];
};
getPersonnel();
const personnel = ref([]);
watch(
  () => data.value?.userData,
  (val) => {
    personnel.value = val || [];
  }
);
const handleCascader = (val) => {
  console.log(val);
};
const save = async () => {
  try {
    loading.value = true;
    const { parmas } = data.value;
    const { code, message } = await props.api({
      ...parmas,
      user_ids: personnel.value,
    });
    if (code !== 200) return ElMessage.error(message);
    ElMessage.success("更新成功!");
    handleClose(true);
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
const customFilterMethod = (node, keyword) => {
  return node.label.toLowerCase().includes(keyword.toLowerCase())
}
const searchValue = ref([]);
watch(
  () => searchValue.value,
  (val) => {
    if (!val.length) return;
    const set = new Set([...personnel.value, ...val]);
    personnel.value = Array.from(set);
  }
);
const handleRemove = (val) => {
  personnel.value = personnel.value.filter((item) => item !== val);
};
</script>
<style lang="scss" scoped>
.search {
  border: none;
  padding: 10px;
  &:deep(.el-input__wrapper) {
    padding: 1px 15px;
    box-shadow: none;
    background-color: var(--base-small-bg-color);
  }
}
.cascaderPanel {
  overflow: auto;
  height: 400px;
  border: none;
  border-top: 1px solid var(--base-border-color);
  &:deep(.el-scrollbar__wrap) {
    height: 100% !important;
  }
}
</style>
